
<script setup>
  import {ref} from 'vue'
  // 准备数字数组
  const nums = ref([11, 22, 33, 44])
  // 准备对象数组
  const goods = ref([
    {id:1, name: 'lisi', age: 12},
    {id:2, name: 'wangwu', age: 16},
    {id:3, name: 'zhangsan', age: 20},
  ])
  // 准备对象
  const obj = ref({id: 5, name: '足球', price: 20})

</script>
<template>
<div>
  <!-- 遍历数字数组 -->
  <ul v-for="item, index in nums">
    {{ item }} => {{ index }}
  </ul>
  <!-- ！！！遍历对象数组 ！！！ -->
  <ul class="goods_list">
    <li class="goods_item" v-for="item in goods">
      {{ item.id }} => {{ item.name }} => {{ item.age }}
    </li>
  </ul>
  <!-- 遍历数字 -->
  <div>
    <p v-for="item, index in 5">
      {{ item }} => {{ index }}
    </p>
  </div>
  <!-- 遍历对象 -->
  <ul>
    <li v-for="value, key, index in obj">
      {{ value }} => {{ key }} => {{ index }}
    </li>
  </ul>
  
</div>
</template>


<style scoped>

</style>